<template>
	<view>
		<view :style="{height: statusHeight}" class="uni-status-bar">
		</view>
	<view class="navbox">
		<view class="navboxleft iconfont" :class="navzuoicof" @tap="Tap_navout"><slot name="left"></slot></view>
		<view class="navbar"><slot name="center"></slot></view>
		<view class="navbarright  iconfont"><slot name="right"></slot> </view>
	</view>
	</view>
</template>

<script>
	export default {
		props:{
			navzuoicof:{
				type:String,
				default:''
			},
			navyou:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {
				statusHeight: 20
			}
		},
		mounted() {
			this.statusHeight = uni.getSystemInfoSync().statusBarHeight + 'px'
		},
		methods: {
	
			Tap_navout(){
				uni.navigateBack()
			}
		}
	}
</script>

<style scoped lang="scss">
	.uni-status-bar{
		height: 20px;
	}
	.navbox{
// position: relative;
// 	top: 0;
// 	left: 0;
// 	z-index: 99;
	// display: flex;
	// box-shadow: 0 2rpx 2rpx rgba(100,100,100,.1);
	background: linear-gradient(to right,#3388ee, #4db9f1);
	height: 100rpx;
	line-height: 100rpx;
	justify-content: center;
	align-items: center;
	padding: 0 40rpx;
	color: #F8F8F8;
		.iconfont{
			width: 200rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
.navbar{
	  width: 100%;
		text-align: center;
}
.navbarleft{
	// flex: 0 0 200rpx;
}
.navbaright{
	// flex: 0 0 200rpx;
}

}
</style>
